<%--
  Created by IntelliJ IDEA.
  User: daishixng
  Date: 2020/7/23
  Time: 20:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>网站后台管理模版</title>
    <%--<link rel="stylesheet" type="text/css" href="../../back/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="../../back/css/admin.css"/>--%>
</head>
<body>
<%--<div class="wrap-container clearfix">
    <div class="column-content-detail">

        <div class="layui-form" id="table-list">

        </div>
    </div>
</div>--%>
    <div id="firstChart" style="width: 600px;height:400px;"></div>
    <div id="secondChart" style="width: 600px;height:400px;"></div>

<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script src="js/jquery.table2excel.js" type="text/javascript" charset="utf-8"></script>
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>


    <script>
        // 基于准备好的dom，初始化echarts实例
        var myFirstChart = echarts.init(document.getElementById('firstChart'));
        $(document).ready(function () {
            // 定义两个数组用来存储json返回来的数据
            var xAxis = new Array();
            var yAxis = new Array();
            var values = [];
            var productSelectName = "电影院票房";
            var timestamp = (new Date()).getTime();
            var fileName = productSelectName + timestamp;

            // 进入页面显示统计图
            $.ajax({
                async:true,
                url:"${pageContext.request.contextPath}/moviesBox/getCinemaBox",
                type:"GET",
                contentType:"application/json",
                data:{
                      isDelete:1
                },
                dataType:"json",
                success:function (result) {
                    console.log(result);
                    for(var i = 0; i < result.length; i++){
                        xAxis[i] = result[i].cinemaName;
                        yAxis[i] = result[i].sumPrice;
                        values.push({
                            name:result[i].cinemaName,
                            value:result[i].sumPrice
                        });
                    }
                    // console.log(xAxis);
                    // 指定图表的配置项和数据 柱状图（各影院的票房统计）
                    var firstOption = {
                        title:{
                            text:'影院票房统计图'
                        },
                        tooltip:{  // 组件弹窗
                            show:true,
                            trigger: 'axis'
                        },
                        legend:{
                            data:['各影院票房收入']
                        },
                        grid: {   // 图的上下左右边距
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox:{   // 可视化的工具箱
                            show:true,
                            feature:{
                                dataView:barDataView(fileName),
                                restroe:{  // 重置
                                    show:true
                                },
                                dataZoom:{ // 数据缩放视图
                                    show:true
                                },
                                saveAsImage:{  // 保存图片
                                    show:true
                                },
                                magicType:{  // 动态类型切换
                                    type: ['bar', 'line']
                                }
                            }
                        },
                        xAxis:{
                            type:'category',
                            data:xAxis
                        },
                        yAxis:{
                            type:'value'
                        },
                        series:[{
                            data:yAxis,
                            type:'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(220, 220, 220, 0.8)'
                            }
                        }]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myFirstChart.setOption(firstOption);
                },
                error:function(){
                    alert("ajax异步请求失败");
                }
            });
        })

        $(document).ready(function () {
            var mySecondChart = echarts.init(document.getElementById('secondChart'));
            // 定义两个数组用来存储json返回来的数据
            var xAxis = new Array();
            var yAxis = new Array();
            var values = [];
            var productSelectName = "电影票房";
            var timestamp = (new Date()).getTime();
            var fileName = productSelectName + timestamp;
            $.ajax({
                async:true,
                url:"${pageContext.request.contextPath}/moviesBox/getMovieBox",
                type:"GET",
                contentType:"application/json",
                data:{
                    isDelete:1
                },
                dataType:"json",
                success:function (result) {
                    // console.log(result);
                    for(var i = 0; i < result.length; i++){
                        xAxis[i] = result[i].movieName;
                        yAxis[i] = result[i].sumPrice;
                        values.push({
                            name:result[i].movieName,
                            value:result[i].sumPrice
                        });
                    }

                    // 指定图表的配置项和数据 饼图（各电影的票房统计）
                    var secondOption = {
                        backgroundColor: '#61a0a8',

                        title: {
                            text: '电影票房',
                            left: 'center',
                            top: 20,
                            textStyle: {
                                color: '#ccc'
                            }
                        },

                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },

                        toolbox:{   // 可视化的工具箱
                            show:true,
                            feature:{
                                dataView:pieDataView(fileName),
                            }
                        },

                        visualMap: {
                            show: false,
                            min: 80,
                            max: 600,
                            inRange: {
                                colorLightness: [0, 1]
                            }
                        },
                        series: [
                            {
                                name: '电影',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '50%'],
                                data:values,
                                roseType: 'radius',
                                label: {
                                    color: 'rgba(255, 255, 255, 0.3)'
                                },
                                labelLine: {
                                    lineStyle: {
                                        color: 'rgba(255, 255, 255, 0.3)'
                                    },
                                    smooth: 0.2,
                                    length: 10,
                                    length2: 20
                                },
                                itemStyle: {
                                    color: '#c23531',
                                    shadowBlur: 200,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },

                                animationType: 'scale',
                                animationEasing: 'elasticOut',
                                animationDelay: function (idx) {
                                    return Math.random() * 200;
                                }
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    mySecondChart.setOption(secondOption);
                },
                error:function(){
                    alert("ajax异步请求失败");
                }
            });
        })

        // 柱状图 折线图
        function barDataView(fileName) {
            var dataView = {
                show: true,
                title: '电影院票房统计数据',
                //readOnly: true, //设置只读，会隐藏刷新按钮。
                lang: ['票房数据', '关闭', '导出Excel'],
                contentToOption: function (opts) {
                    $("#tableExcel_Day").table2excel({
                        exclude: ".noExl", //过滤位置的 css 类名
                        filename: fileName+ ".xls", //文件名称
                        name: "Excel Document Name.xls",
                        exclude_img: true,
                        exclude_links: true,
                        exclude_inputs: true
                    });
                },
                optionToContent: function (opt) {
                    // console.log(opt);

                    var axisData = opt.xAxis[0].data; //坐标数据
                    var series = opt.series; //折线图数据
                    var tdHeads = '<td  style="padding: 0 10px">电影院</td><td style="padding: 0 10px">票房</td>'; //表头第一列
                    var tdBodys = ''; //表数据
                    var table = '<table id="tableExcel_Day" border="1" class="table-bordered table-striped" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';
                    //组装表数据
                    for (var i = 0, l = axisData.length; i < l; i++) {
                        for (var j = 0; j < series.length ; j++) {
                            var temp = series[j].data[i];
                            if (temp != null && temp != undefined) {
                                tdBodys += '<td>' + temp.toFixed(2) + '</td>';
                            } else {
                                tdBodys += '<td></td>';
                            }
                        }
                        table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                        tdBodys = '';
                    }
                    table += '</tbody></table>';
                    // console.log(table);
                    return table;

                }
            }
            return dataView;
        }

        // 饼图
        function pieDataView(fileName) {
            var dataView = {
                show: true, readOnly: false,
                title: '电影票房统计数据',
                lang: ['票房数据', '关闭', '导出Excel'],
                contentToOption: function (opts) {
                    $("#tableExcel_Day").table2excel({
                        exclude: ".noExl",
                        filename: fileName + ".xls", //文件名称
                        sheetName: fileName,
                        name: "Excel Document Name.xls",
                        exclude_img: true,
                        exclude_links: true,
                        exclude_inputs: true
                    });
                },
                optionToContent: function (opt) {
                    var series = opt.series[0].data;
                    var tdHeads = '<td  style="padding: 0 10px">电影</td><td style="padding: 0 10px">票房</td>';
                    var tdBodys = ''; //表数据

                    var table = '<table id="tableExcel_Day" border="1" class="table-bordered table-striped" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';
                    //组装表数据
                    for (var j = 0; j < series.length; j++) {
                        var name = series[j].name;
                        if (name != null && name != undefined) {
                            tdBodys += '<td>' + name + '</td>';
                        } else {
                            tdBodys += '<td></td>';
                        }

                        var value = series[j].value;
                        if (value != null && value != undefined) {
                            tdBodys += '<td>' + value + '</td>';
                        } else {
                            tdBodys += '<td></td>';
                        }

                        table += '<tr>' + tdBodys + '</tr>';
                        tdBodys = '';
                    }
                    table += '</tbody></table>';
                    return table;
                }
            }
            return dataView;
        }
    </script>
</body>
</html>
